/*-
 * ============LICENSE_START=======================================================
 * SDC
 * ================================================================================
 * Copyright (C) 2021 Nordix Foundation. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */

@import './../../../../../assets/styles/override.less';
@import './../../../../../assets/styles/variables.less';

.interface-operations {
  font-size: 14px;

  .top-add-btn {
    position: relative;
    top: -31px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: @font-opensans-medium;
  }

  .link {
    color: @sdcui_color_blue;
    text-decoration: underline;
    font-family: @font-opensans-regular;

    &:not(.disabled) {
      &:not(.empty-list-add-btn) {
        &:hover {
          color: @sdcui_color_dark-blue;
          cursor: pointer;
        }
      }
    }
  }

  .operation-list {
    border-top: 1px solid @main_color_o;
    padding-top: 5px;

    .empty-list-container {
      width: 100%;
      display: flex;
      justify-content: center;

      .empty-list-add-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        border: 1px solid @main_color_o;
        margin-top: 50px;

        height: 229px;
        width: 480px;

        &.disabled {
          pointer-events: none;
        }

        &:hover {
          &:not(.disabled) {
            border: 1px solid @sdcui_color_blue;
            cursor: pointer;
          }
        }

        .button-text {
          margin-top: 9px;
          font-family: @font-opensans-medium;
          font-size: 16px;
          text-transform: uppercase;
          color: @sdcui_color_blue;
        }
      }
    }

    .expand-collapse {
      margin-top: 4px;
      margin-bottom: 18px;
      color: @sdcui_color_light-gray;
    }

    .interface-row {
      width: 100%;
      margin-top: 13px;
      border-bottom: 1px solid @main_color_o;
      padding-left: 4px;
      min-height: 37px;


      .interface-accordion {
        cursor: pointer;

        .chevron-container {
          position: relative;
          margin-right: 5px;

          &.isCollapsed {
            right: -6px;
            top: 0;
            * {
              transform: rotate(270deg);
            }
          }
          &:not(.isCollapsed) {
            top: 6px;
          }
          * {
            &:hover {
              cursor: pointer;
            }
          }
        }
        .interface-name {
          font-size: 18px;
          font-family: @font-opensans-bold;
          margin-bottom: 15px;
        }
      }

      .generic-table {
        margin-bottom: 24px;
        margin-top: 10px;
        margin-left: 22px;
        font-size: 14px;

        .header-row, .data-row {
          .cell {
            &.field-description {
              flex: 2.5;
            }

            &.field-actions {
              flex-basis: 72px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }

        .header-row {
          .cell {
            background: @sdcui_color_silver;

            &.field-actions {
              font-size: 10px;
            }
          }
        }

        .data-row {
          cursor: pointer;

          &:hover {
            background: @sdcui_color_light-silver;

            .cell {
              &.field-name {
                color: @sdcui_color_dark-blue;
              }
            }
          }

          &:not(:hover) {
            .field-actions {
              visibility: hidden;
            }
          }

          .cell {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            &.field-description {
              &:not(.collapsed) {
                white-space: normal;
              }
              &.collapsed {
                text-overflow: clip;
              }
              .more-or-less {
                margin-left: 5px;
              }
            }

            &.field-actions {
              .delete-action {
                position: relative;
                top: 2px;
              }
            }
          }

        }
      }

    }
  }
}
